<!-- 生成海报 -->
<template>
	<view class="v-poster-page">
		<!-- 海报 -->
		<image :src="path" mode="widthFix" @click="handlePreviewImg([path], 0)" class="v-border"></image>
		<!-- basePainter 当path（海报路径为空）时进入失败返回绘制海报 -->
		<sunui-painter
			isRenderBlob
			custom-style="position: fixed; left: 200%;"
			:isRenderImage="true"
			:board="basePainter"
			@success="getSuccessInfo"
			@fail="getFailInfo"
		></sunui-painter>
		<view class="flex-column" v-if="path">
			<view class="btnCss2 flex" >长按图片进行保存</view>
			<view class="v-cancel" @click="cancel()">取消</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			basePainter: {},
			path: '',
			poster: '/static/notImg.png',
			qrcode: '',
			options: {},
			serviceDetails: {},
			avatarUrl: '/static/avatar.png',
			imgList:'',
			userInfoObject:{},
			userInfo: uni.getStorageSync("userInfo"),
		};
	},
	onLoad(options) {
		var pages = getCurrentPages(); //当前页
		var beforePage = pages[pages.length - 2]; //上个页面
		this.serviceDetails = beforePage.$vm.serviceDetails;
		this.userInfoObject = beforePage.$vm.userInfoObject;
		this.imgList = this.serviceDetails.cover_img.split(",")[0]
		// this.userInfoFn(this.serviceDetails.uid)
		
		console.log(this.serviceDetails)
		this.$nextTick(()=>{
			this.getPoster();
		})
		// this.type = options.type;
	},
	onShow() {
		
	},
	computed: {
	
		// 订单状态 '1 待审核 2 上架中 3 下架 4 驳回',
		expireTimeFn: function() {
			return function(timestamp) {
	
				// 创建一个 Date 对象
				const date = new Date(timestamp * 1000); // 需要将秒转换为毫秒
	
				// 获取年、月、日、小时、分钟
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计算，需要+1，并且补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零
				const hours = String(date.getHours()).padStart(2, '0'); // 补零
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
	
				// 拼接成 "年月日 时分" 格式
				const formattedDate = `${year}年${month}月${day}日 ${hours}时${minutes}分`;
	
				return formattedDate
			};
		},
		deadlineRegistrationFn() {
	
			return function(time, status) {
				console.log(Math.floor(Date.now() / 1000), time, status)
				if (Math.floor(Date.now() / 1000) > time) {
					return false
				} else {
					return true
				}
			}
	
		},
	},
	methods: {
		async userInfoFn(uid) {
			const res = await this.$http.post({
				url: this.$api.userInfo,
				data: {
		
					id: uid
		
				},
				headers: {
					'Authorization': this.userInfo.token
				}
		
			})
		
			if (res.code == 0) {
		
				this.userInfoObject = res.data
				console.log(res.data)
		
		
			} else {
		
				this.$sun.toast(resPoster.message, 'none')
			}
		},
		// 保存图片
		save() {
			uni.saveImageToPhotosAlbum({
				filePath: this.path,
				success: result => {
					this.$sun.toast('保存成功，可以去分享啦~');
				},
				fail: err => {
					this.$sun.toast('保存失败，稍后再试');
				}
			});
		},
		// 取消
		cancel() {
			this.$sun.navBack();
		},
		
		async getPoster() {
			const result = await this.$http.post({
				url: this.$api.share,
				data: {
					// 产品id
					invite: this.userInfo.invite_code,
					// 用户id
					shareType: 2,
					// 团购id
					id: this.serviceDetails.id
				}
			});
			if (result.code == 0) {
				this.qrcode = result.data.QRcode;
				this.handleShare();
			} else {
				this.$sun.toast(result.message);
			}
		},

		// 海报生成以后的路径
		getSuccessInfo(e) {
			// 会生成一个blob地址， 然后image进行一个显示
			this.path = e;
			uni.hideLoading();
		},
		// 海报生成失败的路径
		getFailInfo(e) {
			uni.showModal({
				title: '提示',
				content: `${JSON.stringify(e)}`,
				showCancel: false
			});

			this.$sun.delay(2, () => {
				uni.hideLoading();
			});
		},
		handleShare() {
			let poster = this.imgList;
			// let qrcode = this.qrcode;
			
			let summary = this.serviceDetails.summary ? this.serviceDetails.summary : '';
			uni.showLoading({
				title: '海报生成中...'
			});
			
			// if (obj.name.length > 34) {
							// 	obj.name = obj.name.substring(0, 32) + '...';
							// }
							// if (obj.subhead.length > 46) {
							// 	obj.subhead = obj.subhead.substring(0, 46) + '...';
							// }
			
            console.log(this.qrcode)
			if (this.path) {
				this.getSuccessInfo(this.path);
			} else {
				this.basePainter = {
					width: '750rpx',
					height: '1184rpx',
					background: '#f7f7f7',
					views: [
						{
							type: 'view',
							css: {
								left: '20rpx',
								top: '24rpx',
								background: '#D2C9FF',
								radius: '10rpx',
								width: '710rpx',
								height: '1100rpx',
								
							}
						},
						{
							type: 'view',
							css: {
								
								left: '42rpx',
								top: '47rpx',
								background: '#fff',
								radius: '10rpx',
								width: '670rpx',
								height: '1054rpx'
							}
						},
						{
							type: 'image',
							url: `${this.userInfoObject.avatar ? this.userInfoObject.avatar : ''}`,
							mode: 'widthFix',
							css: {
								left: '52rpx',
								top: '750rpx',
								width: '54rpx',
								height: '54rpx',
								radius: '50%',
								color: '#999'
							}
						},
						{
							type: 'text',
							text: `${this.userInfoObject.nickname ? this.userInfoObject.nickname : ''}`,
							css: {
								color: '#333',
								left: '120rpx',
								top: '756rpx',
								fontSize: '32rpx',
								fontWeight: 'bold'
							}
						},
						{  
							type: 'text',
							text: `${"性别:"+((this.serviceDetails.sex==0)?'性别不限':this.serviceDetails.sex==1?'男':'女')}`,
							css: {
								color: '#666666',
								left: '52rpx',
								top: '830rpx',
								fontSize: '28rpx',
								
							}
						},
						{
							type: 'text',
							text: `${"服务时间:"+(this.serviceDetails.work_time)+'分钟'}`,
						
							css: {
								color: '#666666',
								left: '312rpx',
								top: '830rpx',
								fontSize: '28rpx',
								
							}
						},
						{
							type: 'text',
							text: `${"在线时间:"+ this.serviceDetails.service_time}`,
							css: {
								color: '#666666',
								left: '52rpx',
								top: '900rpx',
								fontSize: '28rpx',
								width:'450rpx',
							
							}
						},
						{
							type: 'text',
							text: `${"服务地址:"+this.serviceDetails.address}`,
							css: {
								color: '#666666',
								left: '52rpx',
								top: '1000rpx',
								fontSize: '28rpx',
								width:'450rpx',
						
						// 		whiteSpace: 'nowrap',
						// 		overflow: 'hidden',
						// 		textOverflow: 'ellipsis'
								
							
							}
						},

						{
							type: 'image',
							url: `${poster}`,
							mode: 'widthFix',
							css: {
								left: '52rpx',
								top: '60rpx',
								width: '653rpx',
								height: '636rpx'
							}
						},
						
						
						{
							type: 'image',
							url: `${this.qrcode}`,
							mode: 'widthFix',
							css: {
								left: '520rpx',
								top: '830rpx',
								width: '180rpx',
								height: '180rpx'
							}
						}
					]
				};
			}
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f7f7f7;
}
.v-poster-page {
	.v-border {
		border-radius: 10rpx;
		width: 750rpx;
	}
	.v-poster-content {
		height: 1082rpx;
		background: #ffffff;
		border-radius: 10rpx;
		margin: 24rpx 20rpx 68rpx;
	}
	.v-cancel {
		padding: 36rpx;
		font-size: 36rpx;
		color: #8f8f8f;
	}
}
</style>
